<template>
  <div id="container"></div>
<!--  <DeviceDrawer @register="register" />-->
</template>
<script>
import { provide,ref, onMounted, onUnmounted,defineComponent } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { useDrawer } from '/@/components/Drawer';
import { defHttp } from '/@/utils/http/axios';
export default defineComponent({
  components: { AMapLoader },
  setup() {
    const [register, {openDrawer,closeDrawer}] = useDrawer();
    let location = null;
    let map = null;
    let center = [116.469881, 39.993599];
    onMounted(() => {
      AMapLoader.load({
        key: "509e6176d01421fe66803f1029c47263&plugin", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then(async (AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 15.8, // 初始化地图级别
          center, // 初始化地图中心点位置
          showIndoorMap: false,

        });
        const contextMenu = new AMap.ContextMenu();
        var path = [
          new AMap.LngLat(116.368904,39.913423),
          new AMap.LngLat(116.382122,39.901176),
          new AMap.LngLat(116.387271,39.912501),
          new AMap.LngLat(116.398258,39.904600),
        ];
        // 创建折线实例
        var polyline = new AMap.Polyline({
          path: path,
          borderWeight: 3, // 线条宽度，默认为 1
          strokeColor: 'red', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        });
        function pathStr(paths){
          for(let i = 0 ;i < paths.length ; i++){
            console.info(paths[i].getLng()+"    "+paths[i].getLat())
          }
        }

        //右键放大
        contextMenu.addItem("删除画线", function () {
          map.remove(polyline)
          path = [];
          polyline = new AMap.Polyline({
            path: path,
            borderWeight: 3, // 线条宽度，默认为 1
            strokeColor: 'red', // 线条颜色
            lineJoin: 'round' // 折线拐点连接处样式
          });
          map.add(polyline);
          contextMenu.close();
          const  params = {}
         // defHttp.post({url: "" , params});

        }, 2);
        //右键缩小
        contextMenu.addItem("返回一级", function () {
          path.remove(path.length -1)
          polyline.setPath(path)
          contextMenu.close();
        }, 1);
        contextMenu.addItem("添加点位", function () {
          path.push(new AMap.LngLat(location.getLng(),location.getLat()));
          polyline.setPath(path)
         // map.add(polyline);
          contextMenu.close();
          pathStr(path)
        }, 0);
        map.on('rightclick', function (e) {
          location = e.lnglat;
          contextMenu.open(map, e.lnglat);
        });



// 将折线添加至地图实例
        map.add(polyline);
      })
    });
    onUnmounted(() => {
      map?.destroy();
    });

    return {
      register,
      openDrawer,
      closeDrawer,
    };

  },

});
</script>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
html, body, #container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#sidebar {
  position: fixed;
  right: 0px; /* 初始时将侧边栏放在屏幕外面 */
  top: 0;
  width: 40%;
  height: 70%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  transition: right 0.3s ease; /* 添加过渡效果 */
  z-index: 9999; /* 设置层级最高 */
  overflow-y: auto; /* 允许侧边栏内容滚动 */
}
#sidebar.visible {
  right: 0; /* 显示侧边栏时将其移动到屏幕最右边 */
}
</style>
